import {useState, useEffect} from 'react';
import {I18n, Logger} from '@aws-amplify/core';
import {API_NAME} from '../util/Utils';
import {IPageProps, IDevice} from '../components/Shared/Interfaces';
import {API} from '@aws-amplify/api';
import PageTitleBar from '../components/Shared/PageTitleBar';
import Footer from '../components/Shared/Footer';
import Card from 'react-bootstrap/Card';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import Button from 'react-bootstrap/Button';
import axios from "axios";


export default function DeviceDetails(props: any): JSX.Element {
  const logger = new Logger("Device Details");
  const [device, setDevice] = useState<IDevice>({
    key: '1',
    thingName: 'aaa',
    temperature: '36',
    thingTypeName: 'aaa',
    thingArn: 'aaa',
    status: 'aaa',
    version: 1
  });
  const { location } = props
  /**
   * Load simulation from ddb
   */
  const loadDevice = async () => {
    const thingName = location.pathname.split('/').pop();
    try {
      axios.get('/Prod/device/thermostat-3bf10612-898c-401f-ac01-6dfc339fa9ca').then(response => {
        console.log(response.data)    
      }, err => {
          
      }).catch((error) => {
  
        })

      const results = await API.get(API_NAME, `/devices/${thingName}`, {});
      setDevice(results);
    } catch (err: any) {
      logger.error(I18n.get("device.get.error"), err);
    }
  }

  /**
   * react useEffect hook
   * load simulation and needed device type info (topic, id) on load
   * and initializes map if auto demo
   */
  useEffect(() => {
    loadDevice();
  }, []);

  return (
    <div className="page-content">
      <PageTitleBar title="Device Details" />
      <Card style={{ border: '0', marginTop: '20px' }}>
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <Card.Title style={{ marginBottom: '0' }}>{device?.thingName}</Card.Title>
          <Button
            size="sm"
            onClick={() => {
              loadDevice();
            }}
            style={{ marginLeft: '10px' }}
          >
            <i className="bi bi-arrow-repeat"/> {I18n.get("refresh")}
          </Button>
        </div>
        <Card.Body>
          <Row>
            <Col sm="6">
              <Row>
                <Col sm="4"><b>{I18n.get("created")}:</b></Col>
                <Col sm="8">{device?.thingTypeName}</Col>
              </Row>
              <Row>
                <Col sm="4"><b>{I18n.get("device.status")}:</b></Col>
                <Col sm="8">{device?.status}</Col>
              </Row>
              <Row>
                <Col sm="4"><b>{I18n.get("device.thingArn")}:</b></Col>
                <Col sm="8">{device?.thingArn}</Col>
              </Row>
            </Col>
            <Col sm="6">
              <Row>
                <Col sm="4"><b>{I18n.get("device.version")}:</b></Col>
                <Col sm="8">{device?.version}</Col>
              </Row>
              <Row>
                <Col sm="4"><b>{I18n.get("device.temperature")}:</b></Col>
                <Col sm="8">{device?.temperature}</Col>
              </Row>
            </Col>
          </Row>
        </Card.Body>
      </Card>
      <Footer pageTitle={props.title}/>
    </div>
  )
}